<template>
<!--set_store.wxml-->
<form @submit="submitStore">
    <view class="store-info">
        <view class="store-name">
            <view class="store-title">店铺名称：</view>
            <input class="store-input" name="store_name" :value="store.store_name"></input>
        </view>
        <view class="store-name">
            <view class="store-title">真实姓名：</view>
            <input class="store-input" name="true_name" :value="store.true_name"></input>
        </view>
        <view class="store-name">
            <view class="store-title">手机号：</view>
            <input class="store-input" type="number" name="mobile" :value="store.mobile"></input>
        </view>
        <view class="store-name">
            <view class="store-title">QQ：</view>
            <input class="store-input" type="number" name="qq" :value="store.qq"></input>
        </view>
    </view>
    <view class="store-logo">
        <view class="store-title">店铺图片</view>
        <image v-if="store.store_img && store.store_img!='undefined'" class="store-img" :src="url + '' + store.store_img" @tap="changeStoreImg"></image>
        <image v-else class="store-img" :src="url + '/template/mobile/rainbow/static/images/m_03.jpg'" @tap="changeStoreImg"></image>
        <button class="store-btn" form-type="submit">确认修改</button>
    </view>
</form>
</template>

<script>
var app = getApp();
var request = app.globalData.request;
var setting = app.globalData.setting;

export default {
  data() {
    return {
      url: setting.url,
      store: {}
    };
  },

  components: {},
  props: {},
  onLoad: function () {
    this.requestMyStore();
  },
  methods: {
    requestMyStore: function () {
      var that = this;
      request.get('/api/distribut/store', {
        success: function (res) {
          that.setData({
            store: res.data.result
          });
        },
        failStatus: function () {
          return false;
        }
      });
    },
    submitStore: function (e) {
      var that = this;
      var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
      var data = Object.assign(e.detail.value, {
        store_img: this.store.store_img
      });

      if (data.store_name.replace(/\s+/g, '') == "") {
        return app.globalData.showTextWarining("请输入店铺名称");
      } else if (data.true_name.replace(/\s+/g, '') == "") {
        return app.globalData.showTextWarining("请输入真实姓名");
      } else if (data.mobile.replace(/\s+/g, '') == "") {
        return app.globalData.showTextWarining("请输入手机号");
      } else if (!myreg.test(data.mobile)) {
        return app.globalData.showTextWarining("手机号不合法");
      }

      request.post('/api/distribut/store', {
        data: data,
        success: function (res) {
          app.globalData.showSuccess(res.data.msg);
          that.setData({
            store: res.data.result
          });
          uni.navigateBack();
        }
      });
    },
    changeStoreImg: function () {
      var that = this;
      uni.chooseImage({
        count: 1,
        //最多1张图片,默认9
        sizeType: ['compressed', 'original'],
        // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['camera', 'album'],
        // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          request.uploadFile('/api/distribut/upload_store_img', {
            filePath: res.tempFilePaths[0],
            name: 'store_img',
            success: function (res) {
              that.setData({
                'store.store_img': res.data.result
              });
            }
          });
        }
      });
    }
  }
};
</script>
<style>
/* set_store.wxss */
.store-info{
    background-color: white;
    padding: 0 10rpx;
    width: 710rpx;
    margin: 0 auto;
    border-radius: 10rpx;
    overflow: hidden;
    box-sizing: border-box;
    margin-top: 20rpx;
}
.store-name{
    height: 100rpx;
    border-bottom: 1px solid #f3f3f3; 
}
.store-title{
    float: left;
    margin-left: 20rpx;
    margin-top: 30rpx;
    font-size: 30rpx;
}
.store-input{
    font-size: 28rpx;
    color: #7f7f7f;
    height: 95rpx;
    line-height: 95rpx;
    vertical-align: middle;
}
.store-line{
    height: 2rpx;
    background-color: #f5f5f5;
    margin-left: 20rpx;
    margin-right: 20rpx;
}
.store-logo{
    height: 790rpx;
    margin:0 auto;
    background-color: white;
    margin-top: 20rpx;
    width: 710rpx;
    border-radius: 10rpx;
    overflow: hidden;
}
.store-img{
    width: 100%;
    height: 294rpx;
    margin-top: 20rpx;
}
.store-btn{
    width: 80%;
    height: 80rpx;
    line-height: 80rpx;
    vertical-align: middle;
    text-align: center;
    margin-left: 10%;
    margin-right: 10%;
    background-color: #ff6a00;
    color: white;
    margin-top: 20rpx;
    border-radius: 10rpx;
}
</style>